input{
    padding-left: 10px;

    outline: none;
    -webkit-transition:all 5s ease;
}
.input1{
    font-size: 15px;
    width:100px;
    height: 20px;
    border:1px solid deeppink;
    border-radius: 10px;


}
.input2{
    font-size: 20px;
    width:140px;
    height: 30px;
    border:1px solid #ff3520;
    border-radius: 20px;

}
.input3{
    font-size: 25px;
    width:180px;
    height: 40px;
    border:1px solid #18ff21;
    border-radius: 30px;
}
.input4{
    font-size: 30px;
    width:220px;
    height: 50px;
    border:1px solid #9021ff;
    border-radius: 40px;

}
.input1:hover{
    background-color: pink;
}
.input1:active{
    box-shadow: 0 0 10px #2315d9;
}
.input1:focus{
    box-shadow: 0 0 15px #d9cf3d;
    background-color: #9cff18;
}
.input2:hover{
    background-color: pink;
}
.input2:active{
    box-shadow: 0 0 10px #33d940;
}
.input2:focus{
    box-shadow: 0 0 15px #d93025;
    background-color: #5680ff;
}
.input3:hover{
    background-color: #2fff1d;
}
.input3:active{
    box-shadow: 0 0 10px #a690d9;
}
.input3:focus{
    box-shadow: 0 0 15px #15d926;
    background-color: #cf69ff;
}
.input4:hover{
    background-color: pink;
}
.input4:active{
    box-shadow: 0 0 10px #2315d9;
}
.input4:focus{
    box-shadow: 0 0 15px #81c9d9;
    background-color: #ffcd9c;
}
